<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 动态搜索框</title>
</head>
<body>

<p>动态搜索框:</p>

<form>
    <input type="text" name="search" placeholder="搜索..">
</form>
<style>
    *{
        box-sizing: border-box;
    }
    input{
        padding: 30px;
        border: 1px solid gainsboro;
        border-radius: 10px;
        width: 30%;
        transition: 1s;
      ;
    }
    input:active{
        width: 100%;
        border:1px solid black;
    }



</style>
</body>
</html>
